<template>

    <div class="store-connect">
        <h2 v-text="title || 'Stores'"></h2>
        <h3>Connect your store and start selling your products</h3>
        <ul>
            <li>
                <figure>
                    <img src="@/assets/images/store/store-connect-shopify.png" />
                    <strong>Shopify</strong>
                    <button @click="linkTo('shopify')">
                        <svg-icon name="user-store-connect" />
                        <span>Connect</span>
                    </button>
                </figure>
                <p>Leading global eCommerce platform for online stores and retail systems</p>
                <dl>
                    <dt>Key benefits</dt>
                    <dd>• Low entry barrier</dd>
                    <dd>• Great scalability</dd>
                    <dd>• Highly flexible</dd>
                    <dd>• Custom automated workflows</dd>
                    <dd>• Abundant features</dd>
                    <dd>• Safety and Reliability</dd>
                </dl>

            </li>
            <li>
                <figure>
                    <img src="@/assets/images/store/store-connect-etsy.png" />
                    <strong>Etsy</strong>
                    <button @click="linkTo('etsy')">
                        <svg-icon name="user-store-connect" />
                        <span>Connect</span>
                    </button>
                </figure>
                <p>A world-famous marketplace unique and creative goods</p>
                <dl>
                    <dt>Key benefits</dt>
                    <dd>• Easy setup and management</dd>
                    <dd>• Vibrant community</dd>
                    <dd>• Low entry barrier</dd>
                    <dd>• Effective tools and features</dd>
                    <dd>• Engaged audience</dd>
                    <dd>• Trusted Platform</dd>
                </dl>
            </li>
            <li>
                <figure>
                    <img src="@/assets/images/store/store-connect-woo.png" />
                    <strong>WooCommerce</strong>
                    <button @click="linkTo('woocommerce')">
                        <svg-icon name="user-store-connect" />
                        <span>Connect</span>
                    </button>
                </figure>
                <p>A customizable, open-source eCommerce solution</p>
                <dl>
                    <dt>Key benefits</dt>
                    <dd>• Cost-effective solutions</dd>
                    <dd>• Strong security</dd>
                    <dd>• Vast customization options</dd>
                    <dd>• Powerful SEO tools</dd>
                    <dd>• User-friendly interface</dd>
                    <dd>• Supportive community</dd>
                </dl>
            </li>

            <li v-loading="loading">
                <figure>
                    <img src="@/assets/images/store/store-connect-wix.png" />
                    <strong>Wix</strong>
                    <button @click="linkTo('wix')">
                        <svg-icon name="user-store-connect" />
                        <span>Connect</span>
                    </button>
                </figure>
                <p>A free, user-friendly website building platform</p>
                <dl>
                    <dt>Key benefits</dt>
                    <dd>• Smooth learning curve</dd>
                    <dd>• Image gallery included</dd>
                    <dd>• No hosting worries</dd>
                    <dd>• Video backgrounds</dd>
                    <dd>• No web coding skills required</dd>
                    <dd>• Over 500 Templates</dd>
                </dl>
            </li>

            <li>
                <figure>
                    <img src="@/assets/images/store/store-connect-squ.png" />
                    <strong>Squarespace</strong>
                    <button @click="linkTo('squarespace')">
                        <svg-icon name="user-store-connect" />
                        <span>Connect</span>
                    </button>
                </figure>
                <p>An all-in-one website builder featuring a powerful blogging tool</p>
                <dl>
                    <dt>Key benefits</dt>
                    <dd>• Easy to use</dd>
                    <dd>• Mobile responsive</dd>
                    <dd>• No-code website editing</dd>
                    <dd>• Highly customizable</dd>
                    <dd>• Well-designed templates</dd>
                    <dd>• All-in-one platform</dd>
                </dl>
            </li>
        </ul>

    </div>

</template>

<script>
export default {
    props: {
        title: { type: String, default: '' },
    },
    data () {
        return {
            loading: false,
        };
    },
    methods: {
        async linkTo (store) {

            if (store == 'shopify') {
                window.open("https://apps.shopify.com/podpartner", "_blank");
            } else if (store == 'squarespace') {
                this.$router.push("/document/square-description");
            } else if (store == 'etsy') {
                this.$router.push("/document/etsy-description");
            } else if (store == 'wix') {
                if (this.loading) return;
                this.loading = true

                let opener = window.open("about:blank");
                let response = await this.$http('AppStore.getWixConnectUrl');
                if (response.code === 0) {
                    this.loading = false
                    opener && (opener.location = response.data);
                } else {
                    this.loading = false
                    this.$uxMessage.error(response.msg || "get connect url failure");
                    opener && opener.close();
                }
            } else if (store == 'woocommerce') {
                this.$router.push("/document/woo-description");
            }
        },

    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.store-connect {
    & > h2 {
        font-size: 36px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000;
        line-height: 40px;
    }
    & > h3 {
        margin-top: 24px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 22px;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        margin: 16px -8px 0;
    }
    li {
        display: flex;
        flex-direction: column;
        width: calc(50% - 16px);
        margin: 8px;
        box-sizing: border-box;
        position: relative;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        padding: 28px;

        figure {
            display: flex;
            align-items: center;

            img {
                width: 32px;
                height: 32px;
                margin-right: 16px;
            }
            strong {
                flex: 1;
                font-size: 24px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 32px;
            }

            button {
                width: 106px;
                height: 32px;
                svg {
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }
            }
        }

        p {
            margin-top: 24px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 20px;
        }

        dl {
            margin-top: 24px;
            border-top: 1px dashed #e6e6e6;
            display: flex;
            flex-wrap: wrap;
            dt {
                width: 100%;
                margin-top: 24px;
                margin-bottom: 14px;
                font-size: 16px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 18px;
            }

            dd {
                width: 50%;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555;
                line-height: 24px;
            }
        }
    }
}
</style>
